<template>
  <div>
    <el-tree
      class="lefttree-css"
      :data="treeData"
      :highlight-current="true"
      :props="{ children: 'children', label: 'name' }"
      node-key="id"
      :default-expanded-keys="[0]"
      :current-node-key="0"
      @node-click="onClickTree"
    >
      <span class="width-css" slot-scope="{ node }">
        <div class="tree-btn-div">
          <div class="tree-btn-left">{{ node.label }}</div>
          <div class="tree-btn-rigth">
            <sc-icon v-show="node.level === 1" name="icontianjia-ziji" @click.native.stop="onAddTree()"></sc-icon>
            <sc-icon
              v-show="node.level === 2"
              class="tree-btn-edit"
              name="iconbianji"
              @click.native.stop="onEditTree(node)"
            ></sc-icon>
            <sc-icon v-show="node.level === 2" name="iconshanchu" @click.native.stop="onDeleteTree(node)"></sc-icon>
          </div>
        </div>
      </span>
    </el-tree>

    <!-- 新增弹窗 -->
    <el-dialog
      :title="trueEdit ? '编辑分类' : '新增分类'"
      :visible.sync="addTreeDialog"
      :append-to-body="true"
      width="400px"
      top="25vh"
      :close-on-click-modal="false"
    >
      <el-input v-model.trim="addTreeName" placeholder="请输入" maxlength="8"></el-input>
      <p class="tips-text">{{ addTreeNameText }}</p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addTreeDialog = false">取 消</el-button>
        <el-button type="primary" @click="trueEdit ? editTreeSubmit() : addTreeSubmit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getKnowCategoryList,
  createKnowCategory,
  updateKnowCategory,
  deleteKnowCategory
} from '@/api/knowledgeBaseApi.js';
export default {
  name: 'LeftTree',
  data() {
    return {
      treeData: [
        //树形数据
        {
          name: '知识库分类',
          id: 0,
          children: []
        }
      ],
      addTreeDialog: false, //新增弹窗
      trueEdit: false, //判断编辑
      addTreeName: '',
      addTreeNameText: '',
      treeNodeData: '' //编辑的树值
    };
  },
  mounted() {
    this.onTreeData();
  },
  methods: {
    //知识库分类列表数据
    onTreeData() {
      (this.treeData = [
        //树形数据
        {
          name: '知识库分类',
          id: 0,
          children: []
        }
      ]),
        getKnowCategoryList().then(res => {
          res.data.list.map(item => {
            item.label = item.name;
            this.treeData[0].children.push(item);
          });
        });
    },
    //点击树查询右边列表
    onClickTree(node) {
      this.$emit('onClickTree', node.id);
    },
    //打开新增弹窗
    onAddTree() {
      this.addTreeName = '';
      this.addTreeNameText = '';
      this.trueEdit = false;
      this.addTreeDialog = true;
    },
    //提交新增
    addTreeSubmit() {
      if (this.addTreeName === '') {
        this.addTreeNameText = '请输入';
        return;
      }
      createKnowCategory({ name: this.addTreeName }).then(res => {
        this.onTreeData();
        this.addTreeDialog = false;
      });
    },
    //打开修改弹窗
    onEditTree(node) {
      this.treeNodeData = node;
      this.onAddTree();
      this.trueEdit = true;
      this.addTreeName = node.label;
    },
    //提交编辑
    editTreeSubmit() {
      if (this.addTreeName === '') {
        this.addTreeNameText = '请输入';
        return;
      }
      let params = { name: this.addTreeName, id: this.treeNodeData.key };
      updateKnowCategory(params).then(res => {
        this.onTreeData();
        this.addTreeDialog = false;
      });
    },
    //删除
    onDeleteTree(node) {
      this.$confirm('确定该删除知识分类？', '删除知识分类', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteKnowCategory({ id: node.key }).then(res => {
            this.onTreeData();
          });
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
//树形大小
::v-deep .el-tree-node__content {
  height: 36px;
}
//弹窗间距
::v-deep .el-dialog__body {
  padding: 20px 20px 25px 20px;
}

.width-css {
  width: 100%;
}
.tree-btn-div {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.tree-btn-left {
}
.tree-btn-rigth {
  margin-right: 15px;
}
.tree-btn-edit {
  margin-right: 10px;
}
.tips-text {
  margin-top: 10px;
  color: #f56c6c;
}
</style>
